<template>
	<view class="bg">
		<view class="" :style="{height: menuTopHeight + 'px'}"></view>
		<view class="menu-box" :style="{height: menuHeight + 'px'}">
			<u-icon name="arrow-left" color="#fff" size="20" @click="goBack"></u-icon>
			<view class="navigate-title">支付确认</view>
		</view>
		<view class="bg-circle">
			<u-image width="100%" height="370rpx" src="/static/images/b4.png"></u-image>
		</view>
	</view>
	<view class="container">
		<view class="userinfo">
			<u-avatar src="/static/images/avatar.png" size="116rpx"></u-avatar>
			<view class="content-box">
				<view class="name-box">
					<view class="name">李医生</view>
					<view class="tag">主任中医师</view>
				</view>
				<view class="name1">儿科专家</view>
			</view>
		</view>

		<!-- 费用信息 -->
		<view class="pay-info">
			<u-cell-group>
				<u-cell clickable title="就诊日期" titleStyle="font-size: 28rpx;color: #B3BCCC;"
					value="2023-11-16   12:00-1:00">
					<template #icon>
						<view>
							<u-image width="60rpx" height="60rpx" src="/static/images/a29.png"></u-image>
						</view>
					</template>
				</u-cell>
				<u-cell clickable title="就诊人" titleStyle="font-size: 28rpx;color: #B3BCCC;" value="易小博">
					<template #icon>
						<view>
							<u-image width="60rpx" height="60rpx" src="/static/images/a30.png"></u-image>
						</view>
					</template>
				</u-cell>
				<u-cell clickable title="手机号码" titleStyle="font-size: 28rpx;color: #B3BCCC;" value="152****4546">
					<template #icon>
						<view>
							<u-image width="60rpx" height="60rpx" src="/static/images/a31.png"></u-image>
						</view>
					</template>
				</u-cell>
				<u-cell clickable :border="false" title="挂号费" titleStyle="font-size: 28rpx;color: #B3BCCC;"
					value="152****4546">
					<template #icon>
						<view>
							<u-image width="60rpx" height="60rpx" src="/static/images/a34.png"></u-image>
						</view>
					</template>
					<template #value>
						<view class="price-box">
							<text style="font-size: 28rpx;">￥</text>
							<text style="font-size: 38rpx;">153</text>
						</view>
					</template>
				</u-cell>
			</u-cell-group>
		</view>

		<!-- 支付选择 -->
		<view class="payment-select-box">
			<u-radio-group v-model="payment" placement="column">
				<view class="payment-item">
					<view class="left">
						<u-image width="40rpx" height="40rpx" src="/static/images/a40.png"></u-image>
						<view class="pay-name">微信支付</view>
					</view>
					<view class="right">
						<u-radio activeColor="#516DDB" name="1"></u-radio>
					</view>
				</view>
				<view class="payment-item center">
					<view class="left">
						<u-image width="40rpx" height="40rpx" src="/static/images/a41.png"></u-image>
						<view class="pay-name">余额支付</view>
						<view class="pay-tip">当前余额：123.23元</view>
					</view>
					<view class="right">
						<u-radio activeColor="#516DDB" name="2"></u-radio>
					</view>
				</view>
				<view class="payment-item">
					<view class="left">
						<u-image width="40rpx" height="40rpx" src="/static/images/a42.png"></u-image>
						<view class="pay-name">抵扣券支付</view>
					</view>
					<view class="right">
						<u-radio activeColor="#516DDB" name="3"></u-radio>
					</view>
				</view>
			</u-radio-group>
		</view>
	</view>

	<view class="btn">
		<u-button throttleTime="1000"
			:customStyle="{height: '86rpx', boxShadow: '0rpx 4rpx 34rpx 1rpx rgba(87,129,240,0.4)', letterSpacing: '.1rem'}" :hairline="false"
			type="mini" shape="circle" color="linear-gradient(315deg, #4975EC 0%, #97B3FF 100%)"
			@click="goSuccess">立即支付</u-button>
	</view>
</template>

<script setup>
	import {
		useHeight
	} from '@/hooks/useMenuHeight'
	const {
		menuHeight,
		menuTopHeight
	} = useHeight()

	const payment = ref('1')
	const goSuccess = () => {
		uni.navigateTo({
			url: '/mine/reservation/success'
		})
	}
	const goBack = () => {
		uni.navigateBack()
	}
</script>

<style scoped lang="scss">
	.bg {
		width: 100vw;
		height: 370rpx;
		position: relative;

		.menu-box {
			padding-left: 26rpx;
			color: #fff;
			display: flex;
			align-items: center;

			.navigate-title {
				color: #fff;
				font-size: 36rpx;
				color: #FFFFFF;
				margin-left: 18rpx;
			}
		}

		// z-index: -1;
		.bg-circle {
			position: absolute;
			top: 0;
			left: 0;
			z-index: -1;
			width: 100%;
			height: 100%;
		}
	}

	.container {
		position: relative;
		z-index: 19;
		padding: 0 26rpx;
		margin-top: -150rpx;
	}

	.userinfo {
		padding: 30rpx 28rpx;
		background: #fff;
		border-radius: 20rpx;
		@include center();

		.content-box {
			flex: 1;
			margin-left: 24rpx;

			.name-box {
				@include start();

				.name {
					font-size: 36rpx;
					color: #222222;
				}

				.tag {
					font-size: 24rpx;
					color: #606672;
					margin-left: 16rpx;
				}
			}

			.name1 {
				color: #516DDB;
				margin-top: 12rpx;
			}
		}
	}

	.pay-info {
		background: #FFFFFF;
		border-radius: 30rpx;
		margin-top: 30rpx;

	}

	.price-box {
		color: #D67354;
	}

	.payment-select-box {
		background: #FFFFFF;
		border-radius: 30rpx;
		padding: 30rpx;
		margin-top: 20rpx;
		.payment-item {
			@include between(100%);
			.left {
				@include start();
				.pay-name {
					color: #000000;
					font-size: 28rpx;
					margin-left: 16rpx;
				}
				.pay-tip {
					margin-left: 16rpx;
					color: #B3BCCC;
				}
			}
		}
		.center {
			margin: 20rpx 0;
		}
	}
	.btn {
		padding: 0 55rpx;
		width: 100%;
		position: fixed;
		left: 50%;
		bottom: 70rpx;
		transform: translateX(-50%);
		z-index: 9;
	}
</style>